import React from "react";
import { User } from "./search-panel";
import { Button, Dropdown, Menu, Table, TableProps } from "antd";
import dayjs from "dayjs";
import { Link } from "react-router-dom";
import { Pin } from "components/Pin";
import { Project } from "types/project";
import { useEditProject } from "utils/Project";
interface ListProps extends TableProps<Project> {
  users: User[];
  refresh?: () => void;
  setProjectVisible: (isOpen: boolean) => void;
}
export const List = ({ users, ...props }: ListProps) => {
  const { mutite } = useEditProject();
  const pinProject = (id: number) => (pin: boolean) =>
    mutite({ id, pin }).then(props.refresh);
  return (
    <div>
      <Table
        rowKey={(record) => record.id}
        columns={[
          {
            title: <Pin checked={true} disabled={true} />,
            render(value, project) {
              return (
                <Pin
                  checked={project.pin}
                  onCheckedChange={pinProject(project.id)}
                />
              );
            },
          },
          {
            title: "名称",
            dataIndex: "name",
            sorter: (a, b) => a.name.localeCompare(b.name),
            render(value, project) {
              // console.log(value,project);
              return <Link to={String(project.id)}>{project.name}</Link>;
            },
          },
          {
            title: "部门",
            dataIndex: "organization",
          },
          {
            title: "负责人",
            render(value, project) {
              return (
                <span>
                  {" "}
                  {users.find((user) => user.id === project.personId)?.name ||
                    "未知"}
                </span>
              );
            },
          },
          {
            title: "创建时间",
            render(value, project) {
              return (
                <span>
                  {project.created
                    ? dayjs(project.created).format("YYYY-MM-DD")
                    : "无"}
                </span>
              );
            },
          },
          {
            title: "操作",
            render(value, project) {
              const menu = (
                <Menu>
                  <Menu.Item key={"edit"}>
                    <Button
                      type={"link"}
                      onClick={() => props.setProjectVisible(true)}
                    >
                      编辑
                    </Button>
                  </Menu.Item>
                </Menu>
              );
              return (
                <Dropdown overlay={menu}>
                  <Button type={"link"}>...</Button>
                </Dropdown>
              );
            },
          },
        ]}
        {...props}
      ></Table>
    </div>
  );
};
